<template>
  <div>
    
    
    <el-card class="margin_30" shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header" v-if="isactivity">
        <span>条件查询</span>
      </div>
      <el-form :model="formData" ref="form"  label-width="80px" :inline="true" size="mini">
        <el-form-item :label="isactivity ? '':'商品名称'">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item   :label="isactivity ? '':'商品货号'">
          <el-input v-model="formData.productSn"></el-input>
        </el-form-item>
        <el-form-item   :label="isactivity ? '':'品牌'">
          <el-select v-model="formData.brandId"  placeholder="" clearable filterable @change="">
            <el-option v-for="item in brandlist"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          
          <!-- <el-input v-model="formData.brandId"></el-input> -->
        </el-form-item>
        <el-form-item   :label="isactivity ? '':'上架状态'">
          <el-select v-model="formData.publishStatus">
            <el-option v-for="item in publishStatus"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          
          <!-- <el-input v-model="formData.publishStatus"></el-input> -->
        </el-form-item>
        <el-form-item   :label="isactivity ? '':'审核状态'">
          <el-select v-model="formData.verifyStatus" value-key="" placeholder="" clearable filterable @change="">
            <el-option v-for="item in verifyStatus"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          
          <!-- <el-input v-model="formData.verifyStatus"></el-input> -->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
      
    </el-card>
    
    <el-card class="margin_30" shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <div v-if="!isactivity">
          <el-button type="primary" size="mini" @click="goAdd">新增</el-button>
          <el-button type="primary" size="mini" @click="exportToExcel">导出excel</el-button>
        </div>
        <div v-else>商品列表</div>
      </div>
        <el-table :data="list" border stripe>
          <el-table-column 
            prop="id"
            label="商品图片">
            <template v-slot="scope">
              <img :src="scope.row.pic" alt="">
            </template>
          </el-table-column>
          <el-table-column 
            v-if="isactivity"
            prop="id"
            label="选择">
            <template v-slot="scope">
              <el-radio @change="toggleDialog(scope.row)" v-model="radio" :label="scope.row.id"><span> </span></el-radio>
            </template>
          </el-table-column>
          <el-table-column 
            prop="id"
            label="商品名称">
            <template v-slot="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column 
            prop="productCategoryName"
            label="商品类别">

          </el-table-column>
          <el-table-column 
            prop="productCategoryName"
            label="操作">
            <template v-slot="scope">
              <el-button type="primary" size="mini" @click="goEdit(scope.row.id)">操作</el-button>
              
            </template>
          </el-table-column>
        </el-table>
        <slot></slot>
    </el-card>
    
  </div>
</template>

<script>


export default {
 
  props:["list","total","brandlist","isactivity"],
  data() {
      return {
        radio:"",
        isDialogShow:false,
        formData:{
          "brandId": "",
          "id": "",
          "name": "",
          "productCategoryId": "",
          "productSn": "",
          "publishStatus": "",
          "verifyStatus": ""
        },
        publishStatus:[
          {
            name:"下架",
            id:0
          },
          {
            name:"上架",
            id:1
          },
        ],
        verifyStatus:[
          {
            name:"未审核",
            id:0
          },
          {
            name:"审核通过",
            id:1
          },
        ],
      };
  },
  computed: {

  },

  mounted() {

  },
  methods: {
    toggleDialog(val){
      // this.isDialogShow = !this.isDialogShow;
      this.$emit("uptdialog",true,val)
    },
    exportToExcel(){
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['商品名称', '商品类别', '商品价格']
        const filterVal = ['name', 'productCategoryName', 'price']
        const list = this.list;
        const data = this.formatJson(filterVal, list)
        console.log(data)
        excel.export_json_to_excel({
          header: tHeader, //表头 必填
          data:data, //具体数据 必填
          filename: 'excel-list', //非必填
          autoWidth: true, //非必填
          bookType: 'xlsx' //非必填
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    goEdit(id){
      this.$router.push(`/goodsManage/uptlist?id=${id}`)
    },
    goAdd(){
      this.$router.push("/goodsManage/addlist")
    },
    onSubmit(){
      this.$emit("update",this.formData)
      // this.init();
    },
    
  },
};
</script>

<style scoped lang="scss">

</style>
